<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历操作与DOM操作</title>
</head>
<body>
    
</body>
<script>
    /*
        对象我们也是需要使用遍历操作的
            原生的Object对象给我们提供了很多的方法  和数组一样的keys values entries操作
            不同的是对象要使用原型Object  Objext.keys()   数组使用自己的实例对象.keys values entries
    */
    let obj = {
        name:'jimmy',
        age:22,
        sex:'man'
    }
    console.log(Object.keys(obj))  //["name", "age", "sex"]
    console.log(Object.values(obj))  // ["jimmy", 22, "man"]
    console.log(Object.entries(obj))  //[Array(2), Array(2), Array(2)]

    let arr = [
        {name:'Vue.js',click:100},
        {name:'Node.js',click:150},
        {name:'css',click:80}
    ]
    console.log(arr.keys())
    console.log(arr.values())
    console.log(arr.entries())
    // 数组遍历
    // 因为数组自带迭代属性  所以可以直接使用forof循环
    let ul = document.createElement('ul')
    for (const {name,click} of arr) {
        // 配合解构赋值 可以让我们按照想法的来获取自己想要的值
        console.log(name,click)  //Vue.js 100
        let li = document.createElement('li')
        li.innerHTML = `视频为:${name},点击数:${click}`
        ul.appendChild(li)
    }
    document.body.appendChild(ul)

    // 遍历对象
    for (const key in obj) {
        console.log(obj[key])  //jimmy 22 man 
        // forin中的key是对象的属性名
    }

    // 对象没有办法直接使用forof  所以我们可以变相的使用 Object.entries(对象名) //将对象转化成一个可迭代的对象
    for (const [a,b] of Object.entries(obj)) {
        // 使用解构赋值的方式来操作 
        // 解构赋值语法：  等号两边的数据类型一样 比如 {}={}
        console.log(a,b)
    }
    for (const iterator of obj) {
        console.log(iterator)  //obj is not iterable
    // 对象是没有办法直接使用for of的  因为对象不具备迭代属性  但是我们可以转化来使用
    }


</script>
</html>